<template>
  <div @mousedown="mousedown" class="my-action-base" :class="{'my-action-active': active}">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const active = ref(false)

function mousedown() {
  active.value = true
  window.addEventListener('mouseup', deactivate)
}

function deactivate() {
  active.value = false
  window.removeEventListener('mouseup', deactivate)
}
</script>

<style lang="scss" scoped>
.my-action-base {
  background: var(--bg-body);
  color: #444;
  .dark & {
    color: #ddd;
  }
  user-select: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  &:hover {
    background: var(--bg-hover);
  }
}

.my-action-active {
  box-shadow: var(--shadow-concave);
}
</style>